import React, {Component} from 'react';
import NavigationBar from '../../Common/NavigationBar/NavigationBar.jsx'
import WeUI from 'react-weui';
import 'whatwg-fetch'
const {
    CellFooter,
    CellsTitle,
    Cells,
    Cell,
    CellBody,
    Input,
    ButtonArea,
    Button,
    TextArea,
    Toptips,
    Toast,
    NavBar,
    NavBarItem,
    Tab} = WeUI;
import 'react-weui/build/dist/react-weui.css';
import {CSS} from '../styles/CreateTeamStyle.css';
import $ from 'jquery';
export default class DepartmentInfo extends Component {
    constructor(props) {
        super(props);
        this.LeftClick = this.LeftClick.bind(this);
        this.state = {
            showToptips: false,
            showLoading:true,
            showToast: false,
            toastTimer: null,
            topTipsMsg: "服务器错误!",
            teamGroupId:this.props.location.query.teamGroupId, //部门id
            teamId:this.props.location.query.teamId,
            teamName:this.props.location.query.teamName,
            staffData:null,
        };

    }
    showToast() {
        this.setState({showToast: true});
        this.state.toastTimer = setTimeout(()=> {
            this.setState({showToast: false});
        }, 2000);
    }

    showWarn() {
        this.setState({showToptips: true, showLoading: false,});
        this.state.warnTimer = setTimeout(()=> {
            this.setState({showToptips: false});
        }, 2000);
    }

    componentWillMount() {
        this.getGroupUserList();
        if(document.addEventListener){
            document.addEventListener('WeixinJSBridgeReady',this.inviteStaff.bind(this),false);
        }else if(document.attachEvent){
            document.attachEvent('WeixinJSBridgeReady' ,this.inviteStaff.bind(this));
            document.attachEvent('onWeixinJSBridgeReady',this.inviteStaff.bind(this));
        }
        this.getInvitationUserId()
    }

    //获取发送邀请的人员id
    getInvitationUserId(){
        let self = this;
        fetch(getHost() + "/team/group/"+this.state.teamGroupId+"/user/invitation", {
            method: 'POST',
            credentials: 'include',
        }).then(response => response.json())
            .then(data => {
                if (data.success){
                    //分享内容设置 TODO:需要区分分支域名
                    let url =  'http://cradmin.snsunion.cn/?_target=InviteJoin&providerId=1&invitationId='+data.data+'#/InviteJoin';
                    let imgUrl = "http://cradmin.snsunion.cn/assets/images/visitor/join.jpeg";
                    let desc = "邀请您加入" + this.state.teamName;
                    WeixinJSBridge.on('menu:share:appmessage', function(){
                        WeixinJSBridge.invoke('sendAppMessage',{
                            "appid":"", //appid 设置空就好了。
                            "img_url": imgUrl, //分享时所带的图片路径
                            "img_width": "120", //图片宽度
                            "img_height": "120", //图片高度
                            "title": '企业邀请', // 分享标题
                            "desc":desc, // 分享描述
                            "link":url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            success: function () {
                                // 用户点击了分享后执行的回调函数
                            }
                        }, function(res){
                            /*** 回调函数，最好设置为空 ***/
                        });
                    });
                } else {
                    self.state.topTipsMsg = data.error.message;
                    self.showWarn();
                }
            }).catch(e => {
            self.showWarn();
        });
    }

    componentDidMount() {

    }

    //获取部门员工信息
    getGroupUserList(){
        let self = this;
        fetch(getHost() + "/team/group/" + this.state.teamGroupId, {
            method: 'get',
            credentials: 'include',
        }).then(response => response.json())
            .then(data => {
                if (data.success) {
                    self.setState({
                        staffData:data.data,
                        showLoading:false,
                    })
                } else {
                    self.state.topTipsMsg = data.error.message;
                    self.showWarn();
                }
            }).catch(e => {
            self.showWarn();
        });
    }


    LeftClick() {
    }

    //创建员工
    createStaff(){
        location.hash = "/CreateStaff?teamGroupId="+this.state.teamGroupId+"&teamId="+this.state.teamId;
    }

    //编辑部门名称
    EditDepartmentName(){
        location.hash = "/EditDepartment?teamGroupId="+this.state.teamGroupId+"&teamId="+this.state.teamId;
    }

    //编辑员工信息
    staffDetail(id){
        location.hash = "/EditStaff?teamGroupId="+this.state.teamGroupId+"&userId="+id+"&teamId="+this.state.teamId+"&teamName="+this.state.teamName;
    }


    //邀请员工
    inviteStaff(){
        alert("请点击右上角按钮选择发送给朋友进行邀请!!!")
    }
    render() {
        let tempList = [];
        let staffCount;
        let cellTitle;
        let groupName = "";
        if(this.state.staffData){
            if(this.state.staffData.teamGroupUserList.length >0){
                {this.state.staffData.teamGroupUserList.map((staff,index)=>
                    tempList.push(
                        <Cell access onClick={this.staffDetail.bind(this,staff.id)} key={index}>
                            <CellBody>
                                <div className="staffName_title">{staff.teamUserName}</div>
                                <div className="staffPhone_title">{staff.teamUserPhone}</div>
                            </CellBody>
                            <CellFooter/>
                        </Cell>
                    )
                )}
                staffCount = "员工信息("+this.state.staffData.teamGroupUserList.length+")";
                cellTitle = "";
            }else{
                tempList = [];
                staffCount = "员工信息";
                cellTitle = <CellsTitle/>
            }
            groupName = this.state.staffData.teamGroupName;
        }
        return (
            <div style={{height: '100%'}}>
                <NavigationBar Title="部门管理" LeftBar="true" LeftTitle="返回"
                               LeftIconSrc="/iot-meeting/assets/images/common/nav_back_icon.png" LeftClick={this.LeftClick}/>
                <Cells style={{background: "white"}}>
                    <Cell access onClick={this.EditDepartmentName.bind(this)} >
                        <CellBody style={{height:"2.4rem"}}>
                            <div>部门名称</div>
                        </CellBody>
                        <CellFooter className="cell_footer">{groupName}</CellFooter>
                    </Cell>
                </Cells>
                <CellsTitle>{staffCount}</CellsTitle>
                <Cells style={{background: "white"}}>
                    {tempList}
                </Cells>
                {cellTitle}
                <Cells style={{background: "white"}}>
                    <Cell onClick={this.inviteStaff.bind(this)}  access>
                        <CellBody>
                            <div className="createDepartment">邀请员工</div>
                        </CellBody>
                        <CellFooter/>
                    </Cell>
                    <Cell onClick={this.createStaff.bind(this)}  access>
                        <CellBody>
                            <div className="createDepartment">新增员工</div>
                        </CellBody>
                        <CellFooter/>
                    </Cell>
                </Cells>
                <Toast icon="loading" show={this.state.showLoading}>加载中...</Toast>
                <Toptips type="warn" show={this.state.showToptips}>
                    {this.state.topTipsMsg}
                </Toptips>
            </div>
        )
    }
}